<template>
  <!-- 点餐-蚂蚁上树-确认订单-在线支付 -->
  <div class="payonline">
    <order-head :title="title"></order-head>
    <div class="time-box">
      <div class="time-text">支付剩余时间</div>
      <div class="time-show">
        <van-count-down :time="time" />
      </div>
    </div>
    <ul>
      <li class="title">选择支付方式</li>
      <van-radio-group v-model="radio">
        <li>
          <div class="pay-img">
            <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="pay-test">支付宝</div>
          </div>

          <van-radio name="1" checked-color="#4cd964"></van-radio>
        </li>
        <li>
          <div class="pay-img">
            <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="pay-test">微信</div>
          </div>
          <van-radio name="2" checked-color="#4cd964"></van-radio>
        </li>
      </van-radio-group>
    </ul>
    <div class="btn">
      <button>确认支付</button>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Toast,
  RadioGroup,
  Radio,
  Image as VanImage,
  CountDown,
} from "vant";
import OrderHead from "./OrderHead.vue";
export default {
  name: "PayOnline",
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,
    [CountDown.name]: CountDown,
    OrderHead,
  },
  data() {
    return {
      title: "在线支付",
      show: false,
      radio: "1",
      time: 30 * 60 * 60 * 1000,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.payonline {
  width: 100%;
  background-color: #f1f1f1;
  .time-box {
    height: 150px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    .time-text {
      font-size: 16px;
      margin: 45px auto 10px auto;
    }
    .time-show {
      margin: 10px auto 45px auto;
    }
    .van-count-down {
      font-size: 28px;
    }
  }
  ul {
    background-color: white;

    .title {
      background-color: #f1f1f1;
      height: 45px;
      margin: 0;
      padding-left: 15px;
    }
    li {
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px 0 15px;
      .pay-img {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .pay-test {
        margin-left: 8px;
      }
    }
  }
  .btn {
    height: 266px;
    button {
      width: 345px;
      height: 42px;
      background-color: #4cd964;
      border-radius: 10px;
      border: none;
      margin: 15px 15px auto 15px;
    }
  }
}
</style>